<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.cc{
				width: 1300px;
				height: 420px;
				margin: 0px auto;
			}
			.box{
				width: 296px;
				height: 420px;
				float: left;
				position:relative;
				border: 2px solid red;
				margin-right: 10px;
				overflow: hidden;
			}
			.box .imgbox{
				width:1184px ;
				height: 420px;
				position: absolute;
			}
			.box .imgbox img{
				float: left;
				width: 296px;
				height: 420px;
			}
			.box ul {
				width: 100%;
				height: 20px;
				position: absolute;
				bottom: 10px;
				text-align: center;
			}
			.box ul li{
				width: 20px;
				height: 20px;
				display: inline-block;
				margin-right: 10px;
				border-radius: 50%;
				list-style: none;
				background: grey;
			}
			.active{
				background: red !important;
			}
			.box .btn{
				display: block;
				width: 30px;
				height: 60px;
				position: absolute;
				top: 50%;
				margin-top: -30px;
				background: rgba(0,0,0,0.5);
				color: #fff;
				text-decoration: none;
				z-index: 99;
				line-height: 60px;
				text-align: center;
				font-size: 24px;
				
			}
			.box .l{
				left: 0px;
			}
			.box .r{
				right: 0px;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				function cc(th){
					th.siblings('.imgbox').animate({'left':-num*296+'px'},300)
					th.siblings('ul').find('li').eq(num).addClass('active').siblings().removeClass('active')
				}
				
				
				var num =0;
//				添加鼠标移入事件
				$('.box').mouseenter(function(){
//					循环当前box里面的li
					$(this).find('li').each(function(){
//						判断当前li是否有active 这个class
						if($(this).hasClass('active')){
//							让总管变量 等当前拥有active 这个class元素的序号
							num = $(this).index();
						}
					})
				})
				
				
				$('.r').click(function(){
					num++;
					var imgLen = $(this).siblings('.imgbox').find('img').length;
					if(num>imgLen-1){
						num=imgLen-1
					}
					cc($(this))
				})
				$('.l').click(function(){
					num--
					if(num<0){
						num=0
					}
					cc($(this))
				})
				
			})
		</script>
	</head>
	<body>
		<div class="cc">
			<div class="box">
				<a href="javascript:;" class="l btn"> < </a>
				<a href="javascript:;" class="r btn"> > </a>
				<div class="imgbox">
					<img src="img/m1.png"/>
					<img src="img/m2.png"/>
					<img src="img/m3.png"/>
				</div>
				<ul>
					<li class="active"></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="box">
				<a href="javascript:;" class="l btn"> < </a>
				<a href="javascript:;" class="r btn"> > </a>
				<div class="imgbox">
					<img src="img/m1.png"/>
					<img src="img/m2.png"/>
					<img src="img/m3.png"/>
					<img src="img/m4.png"/>
				</div>
				<ul>
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="box">
				<a href="javascript:;" class="l btn"> < </a>
				<a href="javascript:;" class="r btn"> > </a>
				<div class="imgbox">
					<img src="img/m1.png"/>
					<img src="img/m2.png"/>
					<img src="img/m3.png"/>
				</div>
				<ul>
					<li class="active"></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="box">
				<a href="javascript:;" class="l btn"> < </a>
				<a href="javascript:;" class="r btn"> > </a>
				<div class="imgbox">
					<img src="img/m1.png"/>
					<img src="img/m2.png"/>
					<img src="img/m3.png"/>
					<img src="img/m4.png"/>
				</div>
				<ul>
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
		</div>
		</div>
		
		
	</body>
</html>
